<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>//demo/11.template-init.html</title>
    <script src="../js/wfQuery.js?debug=&_t=1422166111083"></script>
	<!-- 
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script>wfQuery = jQuery</script>
    -->
    <style>
    pre.code{background: #d2d2d2;padding: 4px;}
    </style>
</head>
<body>
<a href="../index.html">返回首页</a>

<script src="js/handlebars.min.js"></script>
<script src="js/template-init.js"></script>
<style>
    .pager{
        line-height: 30px;
    }
    .pager span, .pager a{
        padding: 4px 6px;
        margin: 0 8px;
        cursor: pointer;
    }
    .pager .pagination-curr{
        background: #f26c4f;
        color: #fff;
    }
    li a{
        float: left;
        width: 400px;
    }
    li{
        clear: left;
        list-style: none;
    }
</style>

    <h2>template-init支持</h2>

    <div class="pager"></div>
    <ul id="list">
    </ul>
    <div class="pager"></div>

<script type="html/template" id="tmpl" data-target="#list" data-pagination=".pager" data-url="data/tmpl({{pageNo}}).json">
{{#with data}}
    {{#each itemList}}
        <li>
            <a href="{{url}}" target="_blank">{{name}}</a> 
            <span>创建日期： <i>{{createDate}}</i></span>
        </li>
    {{/each}}
    <span class="currentPage">{{pageNo}}</span>
    <span class="totalPage">{{totalPage}}</span>
{{/with}}
</script>

<style>/*

Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>

*/

pre code {
  display: block; padding: 0.5em;
  background: #F0F0F0;
}

pre code,
pre .ruby .subst,
pre .tag .title,
pre .lisp .title {
  color: black;
}

pre .string,
pre .title,
pre .constant,
pre .parent,
pre .tag .value,
pre .rules .value,
pre .rules .value .number,
pre .preprocessor,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .ruby .symbol .keyword,
pre .ruby .symbol .keymethods,
pre .instancevar,
pre .aggregate,
pre .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .addition,
pre .flow,
pre .stream,
pre .bash .variable,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .tex .special,
pre .erlang_repl .function_or_atom {
  color: #800;
}

pre .comment,
pre .annotation,
pre .template_comment,
pre .diff .header,
pre .chunk {
  color: #888;
}

pre .number,
pre .date,
pre .regexp,
pre .literal,
pre .smalltalk .symbol,
pre .smalltalk .char,
pre .go .constant,
pre .change {
  color: #080;
}

pre .label,
pre .javadoc,
pre .ruby .string,
pre .decorator,
pre .filter .argument,
pre .localvars,
pre .array,
pre .attr_selector,
pre .important,
pre .pseudo,
pre .pi,
pre .doctype,
pre .deletion,
pre .envvar,
pre .shebang,
pre .apache .sqbracket,
pre .nginx .built_in,
pre .tex .formula,
pre .erlang_repl .reserved,
pre .input_number {
  color: #88F
}

pre .css .tag,
pre .javadoctag,
pre .phpdoc,
pre .yardoctag {
  font-weight: bold;
}

pre .keyword,
pre .id,
pre .phpdoc,
pre .title,
pre .built_in,
pre .aggregate,
pre .smalltalk .class,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .go .typename,
pre .tex .command {
  font-weight: bold;
}

pre .nginx .built_in {
  font-weight: normal;
}

pre .xml .css,
pre .xml .javascript,
pre .xml .vbscript,
pre .tex .formula {
  opacity: 0.5;
}
</style><pre class="code">
TemplateInit.refresh({
    tmpl: "#tmpl",
    page:{size:'pageSize',to:'pageNo'}
});
</pre><script class="code">
TemplateInit.refresh({
    tmpl: "#tmpl",
    page:{size:'pageSize',to:'pageNo'}
});
</script>
<a href="https://github.com/shy2850/wfQuery.git" target="_"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
</body>
</html>
